<template>
  <div class="confirmOrder">
    <div class="bgColor">
      <h1 class="main-shopcart">确认订单</h1>
    </div>
    <div class="main">
      <div class="info">
        <div class="head">商品信息</div>
        <div class="info-main" v-for="(item, index) in courseInfo" :key="index">
          <div class="courseInfo">
            <div class="coursebg">
              <img :src="item.courseCover" alt="" />
            </div>
            <div class="courseName">{{ item.courseName }}</div>
            <div class="coursePrice">
              <span class="nowprice">￥{{ item.discountPrice }}</span>
              <span class="oldprice">￥{{ item.salePrice }}</span>
            </div>
          </div>
        </div>
        <div class="choose">
          <el-divider></el-divider>
          <h3>
            支付方式
            <span class="pay" v-if="payment">{{ payment.description }}</span>
          </h3>
          <div class="choosebg">
            <div
              @mouseup="mouseup(item)"
              v-for="item in payMethod"
              :key="item.code"
              :class="renderClass(item) + (item.selected ? 'payStyle' : '')"
            >
              <i class="el-icon-eleme" v-if="item.code === 'alipayment'"></i>
              <span v-if="item.code === 'alipayment'">支付宝</span>
              <i class="el-icon-s-tools" v-if="item.code === 'wxpayment'"></i>
              <span v-if="item.code === 'wxpayment'">微信</span>
            </div>
          </div>
        </div>
        <ul class="foot">
          <li class="foot-item">
            应付<span class="unique">￥{{ totalPrice }}</span>
          </li>
          <li>
            <button class="btn" @click="toPayment">确认订单</button>
          </li>
        </ul>
      </div>
    </div>
    <!-- 二维码对话框 -->
    <el-dialog
      :visible.sync="codeVisible"
      class="pay-dialog"
      :title="title"
      width="500px"
    >
      <div class="dialogPrice">
        支付：<span class="prices">{{totalPrice}}元</span>
      </div>
      <div class="codeimg">
        <img :src="qrCode" alt="" />
      </div>
      <div class="alert">请您及时付款，已便订单尽快处理！</div>
      <div class="finish">
        <div class="error" >支付遇到问题</div>
        <div class="success" >我已支付</div>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import {
  settlement,
  wxpay,
  queryOrderWithWxx,
  zfbpay,
  queryOrderWithAli,
} from "@/common/api/payment.js";
import { createToken } from "@/common/api/token.js";
import { deleteShopCars } from "@/common/api/shopcar.js";
export default {
  data() {
    return {
      setArr: [],
      courseInfo: [],
      payment: {},
      totalPrice: null,
      orderNumber: "",
      qrCode: "",
      timeInterVal: "",
      payMethod: [],
      ids: [],
      counter: 0,
      isFinished: false,
      token: "",
      codeVisible: false,
      title: "",
      isWx: false,
      isZfb: false,
      tokens: "",
    };
  },
  created() {
    this.order();
  },
  methods: {
    //获取订单
    order() {
      let selectedArr = JSON.parse(localStorage.getItem("selectedArr"));
      console.log(selectedArr);
      if (!selectedArr) {
        this.$message({
          type: "error",
          message: "访问失败，请重新进入该页面！",
        });
        this.$router.push("/");
        return;
      }
      this.setArr = selectedArr; //[{num:1,id:'55555'},{},{}]
      settlement(this.setArr).then((res) => {
        console.log(res, "结算后的数据");
        this.payMethod = res.data.payModes;
        this.courseInfo = res.data.courses;
        this.totalPrice = res.data.totalPrice;
      });
    },
    //改变支付方式的样式
    renderClass(item) {
      if (!item.selected) {
        item["selected"] = false;
      }
      return "payment" + item.code;
    },
    // 点击的支付方式
    mouseup(payment) {
      console.log(payment);
      this.payMethod.forEach((item) => {
        item.selected = false;
      });
      payment.selected = true;
      this.payment = payment;
      // 用支付方式去获取二维码
    },
    //去支付
    toPayment() {
      if (this.payment.code == "wxpayment") {
        this.title = '微信支付'
        this.codeVisible = true
        //微信支付
        wxpay({courses:this.setArr,payModes:'wxpayment'}).then(res => {
          console.log( res , '课程支付' )
          this.qrCode = res.data.payurl
          this.orderNumber = res.data.orderNumber
          // this.timeInterVal = setInterval(this.queryOrderWithWx,1000)
          //删除购物车中的商品
          this.removeShopCartCourse()
        })
      }
    },
    //根据订单号查询用户的支付状态
    // queryOrderWithWx(){
    //   queryOrderWithWxx({orderNumber:this.orderNumber}).then(res => {
    //     if(res.meta.code == '200'){
    //       //清空定时器
    //       clearInterval(this.timeInterVal)
    //     }
    //   })
    // },
    // 用户选择商品，去生成订单，去支付（后端返回订单号和支付二维码），然后我们根据订单号查询订单状态，跳转不同的页面
    // 购物车购买成功后，把购买的课程从购物车中删除
    // removeShopCartCourse(){
    //   this.setArr.forEach(item => {
    //     this.ids.push(item.id)
    //   })
    //   createToken().then(res => {
    //     this.tokens = res.data.token
    //     deleteShopCars({ids:this.ids,token:this.tokens}).then(res => {
    //       console.log(res,'删除是否成功？')
    //     })
    //   })
    // }
  },
};
</script>
  
  
  <style scoped>
.finish {
  width: 170px;

  line-height: 30px;
  margin: 0 auto;
  display: flex;
}
.success {
  margin-left: 20px;
  width: 70px;
  font-size: 12px;
  background: rgba(54, 137, 255, 0.22);
  color: #3692ff;
  cursor: pointer;
  border-radius: 8px;
}
.error {
  width: 100px;
  font-size: 12px;
  background: linear-gradient(90deg, #fc7979 0%, #da4848 100%);
  color: #ffffff;
  cursor: pointer;
  border-radius: 8px;
}
>>> .el-dialog {
  text-align: center !important;
  border-radius: 10px !important;
}
.dialogPrice {
  padding-bottom: 20px;
  color: #93999f;
}
.prices {
  color: #f01414;
}
.alert {
  padding: 20px 0;
  font-size: 14px;
  color: #93999f;
}
.confirmOrder {
  width: 100%;
  min-height: 900px;
}
.bgColor {
  width: 100%;
  height: 200px;
  background-color: red;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.main-shopcart {
  width: 1200px;
  margin: 0 auto;
  height: 42px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 35px;
  color: #ffffff;
  padding: 30px 0;
  opacity: 1;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.main {
  width: 1200px;
  margin: -100px auto 0 auto;
  /*background-color: red;*/
}
.main h1 {
  color: #ffffff;
  padding: 30px 0 30px 47px;
}
.info {
  width: 1200px;
  padding: 5px 0px 20px 0px;
  background: #f3f5f7;
  border-radius: 10px;
  box-shadow: 0px 2px 5px #888888;
}
.info-main {
  margin: 10px 20px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
}
.head {
  padding: 20px;
  font-size: 18px;
  color: #333333;
}
/* 课程信息 */
.courseInfo {
  display: flex;
  width: 100%;
  height: 160px;
  margin: 0 auto;
}
.coursebg {
  width: 280px;
  height: 160px;
}
.coursebg img {
  width: 100%;
  height: 100%;
}
.courseName {
  margin: 0 20px;
  width: 400px;
  height: 160px;
  font-size: 16px;
  color: #07111b;
  line-height: 160px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coursePrice {
  margin-left: 100px;
  height: 160px;
  text-align: right;
  line-height: 160px;
}
.coursePrice .nowprice {
  font-size: 18px;
  font-weight: 600;
  color: #1c1f21;
}
.coursePrice .oldprice {
  padding-left: 10px;
  font-size: 14px;
  text-decoration: line-through;
  color: #93999f;
}
/* 支付开始 */
.choose {
  width: 1200px;
  margin: 0 auto;
}
.choose h3 {
  color: #222;
  font-size: 16px;
  font-weight: 400;
  padding: 0 20px;
}
.choosebg {
  margin-top: 10px;
  display: flex;
  margin: 20px;
}
.payment {
  width: 130px;
  height: 50px;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 10px;
  line-height: 50px;
  display: flex;
  padding: 0 10px;
  align-items: center;
}
.payment i {
  font-size: 35px;
  margin-right: 10px;
}
.payment span {
  line-height: 50px;
  color: #222222;
  font-weight: bold;
}

.payStyle {
  background: url("../../../public/image/checkedVip.png") no-repeat;
  background-size: 220px 111px;
  background-position: -67px -59px;
  border: #ff470a solid 1px !important;
}
.alipayment {
  border: #bfbfbf solid 1px;
  color: #01a8eb;
}
.wxpayment {
  border: #bfbfbf solid 1px;
  color: #01af37;
}

/* 支付结束 */
/* 结算 */
.foot {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #333333;
  margin-bottom: 10px;
}
.foot-item {
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.foot-item:first-child {
  margin-top: 3px;
}
.old {
  margin-left: 10px;
}
.unique {
  margin-left: 5px;
  font-size: 24px;
  color: #f01414;
}
.btn {
  margin-right: 20px;
  width: 150px;
  height: 50px;
  border: none;
  color: #ffffff;
  font-size: 20px;
  border-radius: 5px;
  background: #f01414;
  cursor: pointer;
  box-shadow: 0px 3px 5px 2px #ff727f;
}
.pay {
  font-size: 18px;
  padding-left: 10px;
  color: #f01414;
}
.codeimg {
  margin: 0 auto;
  border: #d2d2d2 solid 1px;
  background: red;
  width: 150px;
  height: 150px;
}
.codeimg img {
  width: 100%;
  height: 100%;
}
</style>
  